import './index.less'
import React, { Component } from 'react'
import { formateDate } from '../../utils/dateUtils'



export default class Header extends Component {

    state = {
        currentTime: formateDate(Date.now())
    }

    getTime = () => {
        //每隔一秒获取当前时间,并更新状态数据currentTime
        setInterval(() => {
            this.setState({
                currentTime: formateDate(Date.now())
            })
        }, 1000)
    }

    componentDidMount(){
        this.getTime()
    }


    render() {
        const user = localStorage.getItem('username');
        return (
            <div className='header'>
                <div className="header-top">
                    <span>欢迎你,{user}！</span>
                    <a href="#">退出</a>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">首页</div>
                    <div className="header-bottom-right">
                        <span>{this.state.currentTime}</span>
                        <img src="http://api.map.baidu.com/images/weather/day/qing.png" alt="weather" />
                        <span>晴</span>
                    </div>
                </div>
            </div>
        )
    }
}
